<template>
    <div class="consultproblem">
        <!--        查询文章-->
        <div class="select">
        <span>问题标题 : </span>
        <el-input v-model="input" :style="{width:'200px'}"></el-input>
        <el-button @click="onSubmit" type="primary" icon="el-icon-search" class="search">搜索</el-button>
        </div>
        <br>

        <div class="insert">
        <el-button type="primary" @click="dialogFormVisible = true" class="add">新增问题</el-button>
        <el-dialog title="新增问题信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="新增问题标题" :label-width="formLabelWidth">
                    <el-input v-model="form.problems" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="新增问题内容" :label-width="formLabelWidth">
                    <el-input v-model="form.problemtext" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="用户ID" :label-width="formLabelWidth">
                    <template>
                        <el-select v-model="form.userid" autocomplete="off" placeholder="请选择">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.id + '(' + item.nickname + ')'"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog></div>
        <br>
        <!--          表格         -->
        <el-table
                class="table"
                :data="tableData"
                border
                style="width: 100% "
                :cell-style="{textAlign:'center'}"
                :header-cell-style="{'background-color':'#409EFF',color:'#FFF',textAlign:'center'}">
            <el-table-column
                    fixed
                    prop="id"
                    label="问题ID"
            >
            </el-table-column>
            <el-table-column
                    prop="problemtitle"
                    label="用户问题标题"
            >
            </el-table-column>
            <el-table-column
                    prop="problemtext"
                    label="用户问题"
            >
            </el-table-column>
            <el-table-column
                    prop="userId"
                    label="用户ID"
            >
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="用户名字"
            >
            </el-table-column>
            <el-table-column
                    prop="createtime"
                    label="创建时间"
            >
            </el-table-column>
            <el-table-column
                    prop="replyNum"
                    label="回复(人数)"
            >
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope" >
                    <!--                    scope.row 是获取这一行的对象  scope.$index 是当前点击的下标-->
                    <el-button @click="editProblemIndex(scope.$index,scope.row)" type="text" size="small" class="add" >编辑</el-button>
                    <el-button type="text" size="small" @click="open(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑问题信息" :visible.sync="dialogForm">
            <el-form :form="form2">
                <el-form-item label="编辑问题标题" :label-width="formLabelWidth">
                    <el-input v-model="form2.editeproblems" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="编辑问题内容" :label-width="formLabelWidth">
                    <el-input v-model="form2.editerproblemtext" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="编辑用户ID"  :label-width="formLabelWidth">
                    <template>
                        <el-select  autocomplete="off"
                                    v-model="form2.editeuserid"
                                    @change="changeEditeuserid"
                                    placeholder="">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.id+'('+item.nickname+')'"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm=false">取 消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>

        <!--   分页-->
        <div class="block">
            <el-pagination
                    layout="prev, pager, next"
                    :total="10">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "CourseProblem",
        data() {
            return {
                dialogForm: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                input: '',
                form: {
                    username: '',
                    problems: '',
                    replynum: '',
                    userid: '',
                    problemtext:'',
                    nickname:'',
                },
                form2: {
                    editeusername: '',
                    editeuserid:'',
                    editeproblems: '',
                    editeaddtime: '',
                    editereplynum: '',
                    editerproblemtext:''
                },
                tableData: [],
                flag: true,
                scoperow: {},
                userList:{
                    id:'',
                    nickname:''
                },
            }
        },
        //页面初始化后执行
        created() {
            this.selectAll();
            this.selectAllUseridUsername();
        },

        methods: {
            //获取全部数据
            selectAll() {
                this.axios.get("/Consultproblem/problems/show").then((res) => {
                    console.log(res.data.data)
                    this.tableData = res.data.data;
                }).catch((err) => {
                })
            },

            //获取下拉框的用户id,用户名字
            selectAllUseridUsername(){
                this.axios.get("/consultReply/Reply/selectUseridUsername").then((res)=>{
                    console.log("用户获取成功！！！！！！！！！")
                    this.userList=res.data.data;
                    console.log(res)
                }).catch((err)=>{
                    console.log("用户id名字获取失败！")
                })
            },

            //回显该行数据
            showBackBook() {
                this.form2.editeproblems = this.scoperow.problemtitle;
                this.form2.editeusername = this.scoperow.nickName;
                this.form2.editeaddtime = this.scoperow.createtime;
                this.form2.editereplynum = this.scoperow.replyNum;
                this.form2.editerproblemtext= this.scoperow.problemtext;
                this.form2.editeuserid = this.scoperow.userId;
            },

            //点击编辑按钮
            editProblemIndex(index, row) {
                this.scoperow = row;
                this.flag = false;
                this.showBackBook();
                // this.form2.editeuserid='';
                this.dialogForm = true;

            },
            //编辑下拉框
            changeEditeuserid(value){
                this.form2.editeuserid = value;
              console.log('选中的用户ID:', value)
            },
            //删除功能
            open(row) {
                this.$confirm('是否确定要删除该条数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.axios.delete("/Consultproblem/problems/delete", {
                        params: {
                            id: row.id,
                        }
                    }).then(res => {
                        this.selectAll()
                        console.log(res.data)
                        this.tableData = res.data.data;
                    }).catch(err => {
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //搜索
            onSubmit() {
                this.axios.get("/Consultproblem/problems/select", {
                    params: {
                        title: this.input
                    }
                }).then(res2 => {
                    console.log(res2.data)

                    this.tableData = res2.data.data;
                }).catch(err => {
                })

            },

            //新增
            save() {
                if (this.flag) {
                    this.axios.post("/Consultproblem/problems/insert", {
                        problemtitle: this.form.problems,
                        problemtext:this.form.problemtext,
                        nickName: this.form.username,
                        replyNum: this.form.replynum,
                        createtime: this.getDateString(new Date()),
                        userId: this.form.userid,
                    }).then(res2 => {
                        this.selectAll()
                        console.log(res2.data)
                    }).catch(err => {
                    })
                    this.dialogFormVisible = false;
                }

                //问题数据修改走这部分
                this.dialogForm = false;
                this.dialogFormVisible = false;
                let id = this.scoperow.id;
                this.axios.put("/Consultproblem/problems/update", null, {
                    params: {
                        id: id,
                        createTime: this.getDateString(new Date()),
                        problemtitle: this.form2.editeproblems,
                        problemtext:this.form2.editerproblemtext,
                        nickName: this.form2.editeusername,
                        replyNum: this.form2.editereplynum,
                        userId:this.form2.editeuserid
                    }
                }).then(res => {
                    this.selectAll()
                    console.log(res.data)
                    this.tableData = res.data.data;
                }).catch(err => {
                });

            },

            //自动获取时间
            getDateString(date) {
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

            },

        }
    }
</script>

<style scoped>
.consultproblem{
    height: 800px;
    /*background-color: yellowgreen;*/
    margin:20px 18px 0 18px;
    position: relative;
}
.add{
    /*margin-top: 25px;*/
    /*float: left;*/
}
.table{
    margin-top: 20px;
}
.select{
    float: left;
    position: absolute;
    left:0px
    }
    .insert{
        float: left;
        position: absolute;
        left:400px;
        top:0;
    }
</style>